<template>
  <a-modal
    title="添加学生"
    :open="props.modelVisible"
    ok-text="确认"
    cancel-text="取消"
    width="1000px"
    @ok="onOk"
    @cancel="onCancel"
    :maskClosable="true"
    wrap-class-name="full-modal"
    :footer="null"
  >
    <div>
      <a-form ref="formRef" :model="formState" autocomplete="off" :label-col="{ width: '90px' }">
        <div class="filter-box">
          <div class="filter-options">
            <a-form-item label="学生名称" name="studentName">
              <a-input
                v-model:value="formState.studentName"
                placeholder="输入学生"
                allow-clear
                @change="findAllStudents()"
              />
            </a-form-item>
            <a-form-item label="学生学号" name="studentId">
              <a-input
                v-model:value="formState.studentId"
                placeholder="输入学号"
                allow-clear
                @change="findAllStudents()"
              />
            </a-form-item>
          </div>
          <div class="filter-buttons">
            <a-button type="primary" :disabled="!hasSelected" @click="addStudents()"
              >添加：{{ state.selectedRowKeys.length }}</a-button
            >
          </div>
        </div>
      </a-form>
      <a-table
        style="padding: 5px; height: 100%"
        :pagination="false"
        :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :data-source="studentList"
        :loading="tableLoading"
        rowKey="userId"
        :scroll="{ y: '45vh' }"
      />
    </div>
    <a-pagination
      v-model:current="current"
      v-model:page-size="pageSizeRef"
      :total="total"
      @change="findAllStudents()"
      show-size-changer
      class="pagination"
    />
  </a-modal>
</template>
<script lang="ts" setup>
import { message, type FormInstance } from 'ant-design-vue';
import UserDao from '@/daos/user_dao';
import ClassDao from '@/daos/class_dao';
const userDao = new UserDao();
const classDao = new ClassDao();
//modelVisible用于开关窗口，默认关闭
const props = defineProps({
  modelVisible: {
    type: Boolean,
    default: false
  },
  classId: {
    type: Number
  }
});
//emit用于修改窗口状态
const emit = defineEmits(['update:modelVisible', 'confirm']);
//筛选输入框存储对象
const formState = reactive({
  studentName: '',
  studentId: undefined
});

//表格数据源
const studentList = ref([]);
//表格加载选项
const tableLoading = ref(false);
//表格列表
const columns = [
  {
    title: '姓名',
    dataIndex: 'studentName',
    align: 'center'
  },
  {
    title: '学号',
    dataIndex: 'studentId',
    align: 'center'
  },
  {
    title: '学院',
    dataIndex: 'college',
    align: 'center'
  },
  {
    title: '专业',
    dataIndex: 'major',
    align: 'center'
  },
  {
    title: '班级',
    dataIndex: 'className',
    align: 'center'
  }
];
//表格多选存储参数
const state = reactive<{
  selectedRowKeys: [];
}>({
  selectedRowKeys: []
});
const onSelectChange = (selectedRowKeys: []) => {
  state.selectedRowKeys = selectedRowKeys;
};
//计算选中的学生数量是否大于0
const hasSelected = computed(() => state.selectedRowKeys.length > 0);
//分页参数
const current = ref(1);
const pageSizeRef = ref(10);
const total = ref();

const addStudents = () => {
  classDao
    .addClassStudentRef(props.classId, state.selectedRowKeys)
    .then((result) => {
      message.success(result.data.msg);
      state.selectedRowKeys = [];
      emit('confirm');
    })
    .catch((error) => {
      console.error('为项目班添加学生失败', error);
    });
};
//定义表单
const formRef = ref<FormInstance>();

//查询所有学生
const findAllStudents = () => {
  userDao
    .findAllStudents(
      props.classId,
      formState.studentId,
      formState.studentName,
      current.value,
      pageSizeRef.value
    )
    .then((result) => {
      studentList.value = result.data.data.rows;
      total.value = result.data.data.totalCount;
    })
    .catch((error) => {
      console.error('查询所有学生错误', error);
    });
};
const onOk = () => {
  formRef.value
    .validateFields()
    .then(() => {})
    .catch((error) => {
      console.error('数据验证失败:', error);
    });
};
const onCancel = () => {
  // formRef.value.resetFields();
  emit('update:modelVisible', false);
};

watch(
  () => props.modelVisible,
  () => {
    if (props.modelVisible == true) {
      findAllStudents();
    }
  }
);
</script>

<style scoped>
.filter {
  height: auto;
}
.filter-box {
  display: flex;
  height: 30px;
  padding: 0 15px;
  justify-content: space-between;
}
.filter-options {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 60%;
}

.filter-buttons {
  display: flex;
  justify-content: space-between;
}
.pagination {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 10%; /* 需要父容器有明确高度 */
}
</style>
<style>
.full-modal {
  .ant-modal {
    max-width: 100%;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;

    height: calc(75vh);
  }

  .ant-modal-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    overflow: auto;
  }
  .ant-modal-footer {
    text-align: end;
    background: transparent;
  }
}
</style>
